<template>
    <el-dialog @close="closeHandler" width="700px" :visible.sync="dialogShow" :title="formData.id ? '修改咯' : '新增咯'">
        <el-form v-if="dialogShow" ref="form" :model.sync="formData" :rules="formRules">
            <el-form-item label-width="80px" label="学科名称" prop="subject_name">
                <el-input clearable style="width:500px" size="small" v-model="formData.subject_name" placeholder="请输入学科名称"></el-input>
            </el-form-item>
            <el-form-item label-width="80px" label="排序" prop="sort">
                  <el-input-number clearable size="small" v-model="formData.sort" @change="handleChange" :min="-18" :max="1000"></el-input-number>
            </el-form-item>
            <el-form-item label-width="80px" label="是否显示" prop="is_show">
                  <el-switch
                    v-model="formData.is_show"
                    active-color="#13ce66"
                    :active-value="1"
                    :inactive-value="2"
                    active-text="是"
                    inactive-text="否"
                    >
                </el-switch>
            </el-form-item>
            <el-form-item label-width="80px" label="学科图标">
                <uploadImg ref="studyIcon"/>
                <span>建议尺寸：200*200</span>
            </el-form-item>
        </el-form>
        <el-row type="flex" justify="end">
            <el-button @click="cancel" size="small">取消</el-button>
            <el-button size="small" type="primary" @click="btnOk">确定</el-button>
        </el-row>
    </el-dialog>
</template>

<script>
import uploadImg from '@/views/subject/subject/components/uploadImg'
import { addSubjectApi, editSubjectApi } from "@/api/subject";
export default {
    name: 'AddSubject',
    components: {
        uploadImg
    },
    props: {
        list: {
            type: Array
        }
    },
    data() {
        return {
            formData: {
                is_show: null,
                sort: 10,
                subject_icon:'',
                subject_name: ''
                // id:this.list[this.list.length-1].id + 1
            },
            formRules: {
                subject_name: [{ required: true, message: '请输入', trigger: 'blur' }],
                sort: [{ required: true }],
                is_show: [{required:true}]
            },
            dialogShow:false
        };
    },
    // updated() {
    //     // console.log(this.list[this.list.length-1].id + 1);
    //     // console.log(this.list);
    //     this.editphoto()
    //     console.log(666);
    // },

    mounted() {
        
    },
    watch: {
        formData: {
            handler(newVal, oldVal) {
                if (newVal.id) {
                    // let url = newVal.subject_icon
                    // this.$refs.studyIcon.fileList=[]
                    // this.$refs.studyIcon.fileList.push({
                    //     'url': url
                    // })
                    // console.log(newVal);
                    this.editphoto()
                }
            }
        }
    },

    methods: {
        //排序
        handleChange(value) {
        this.formData.sort = value
        },
        //关闭弹框
        closeHandler() {
        this.formData = {
            is_show: null,
            sort: 10,
            subject_icon:'',
            subject_name: ''
            },
        this.dialogShow = false
        },
        //取消按钮
        cancel() {
            this.formData = {
                is_show: null,
                sort: 10,
                subject_icon:'',
                subject_name: ''
            }
            this.dialogShow = false
        },
        //发送新增/修改请求
        async btnOk() {
            try {
                if (this.formData.id) {
                    //删除作者
                    delete this.formData.username
                    // formData.subject_icon的图片地址为图片上传组件内的图片地址
                    this.formData.subject_icon = this.$refs.studyIcon.fileList[0].url
                    await this.$refs.form.validate()
                    await editSubjectApi(this.formData)
                    this.$message.success('修改成功啦!(#^.^#)')

                } else {
                    this.formData.subject_icon = this.$refs.studyIcon.fileList[0].url
                    await this.$refs.form.validate()
                    await addSubjectApi(this.formData)
                    this.$message.success('新增成功啦!(#^.^#)')


                }
                this.dialogShow = false
                this.formData = {}
                this.$emit('updateList')
            } catch (error) {
                console.log(error);
            }
        },
      //编辑图片回显
         editphoto() {
            this.$nextTick(() => {
               this.$refs.studyIcon.fileList=[]
                if (this.formData.id) {
                let url = this.formData.subject_icon
                // console.log(this.$refs.studyIcon);
                this.$refs.studyIcon.fileList=[]
                this.$refs.studyIcon.fileList.push({
                    'url':url
                })
                }     
            })
      }
    },
};
</script>

<style lang="scss" scoped>
// ::v-deep .el-upload{
//     width: 100px;
//     height: 100px;
// .el-icon-plus:before{
//         margin: auto;
//     }
// }
// ::v-deep.avatar{
//     width: 100px;
//     height: 100px;
// }
</style>